<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>微信应用管理服务平台</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/echarts/echarts.js"/>
</head>
<body>
<div class="wrap-container welcome-container">
    <div class="row">
        <!--四个主菜单导航开始-->
        <div class="welcome-left-container col-lg-9 marb10">
            <div class="panel area-pad">
                <div class="area-tit">昨日收益信信息</div>
                <div class="four-area-menu">
                    <ul>
                        <li class="menu-bg-one">
                            <div class="menu-tit">昨日新增用户</div>
                            <div class="menu-data">215<span>人</span></div>
                            <div class="tmpic-bg"><img src="../../images/bar01.png"> </div>
                        </li>
                        <li class="menu-bg-two">
                            <div class="menu-tit">昨日佣金总额</div>
                            <div class="menu-data">2115<span>元</span></div>
                            <div class="tmpic-bg"><img src="../../images/bar02.png"> </div>
                        </li>
                        <li class="menu-bg-thr">
                            <div class="menu-tit">昨日好评率</div>
                            <div class="menu-data">95<span>%</span></div>
                            <div class="tmpic-bg"><img src="../../images/bar03.png"> </div>
                        </li>
                        <li class="menu-bg-four">
                            <div class="menu-tit">佣金总额</div>
                            <div class="menu-data">21545<span>元</span></div>
                            <div class="tmpic-bg"><img src="../../images/bar04.png"> </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--四个主菜单导航结束-->
        <!--日历开始-->
        <div class="welcome-left-container col-lg-3 marb10">
            <div class="panel area-pad">
                <div class="area-tit">日历</div>
                <div class="div-calendar-month"><span>August</span><span>2019</span></div>
                <div class="div-calendar-week">
                    <ul>
                        <li>
                            <div class="weekname">MON</div>
                            <div class="datelist">11</div>
                        </li>
                        <li>
                            <div class="weekname">THU</div>
                            <div class="datelist">12</div>
                        </li>
                        <li class="checked">
                            <div class="weekname">WED</div>
                            <div class="datelist">13</div>
                        </li>
                        <li>
                            <div class="weekname">THU</div>
                            <div class="datelist">14</div>
                        </li>
                        <li>
                            <div class="weekname">FRI</div>
                            <div class="datelist">15</div>
                        </li>
                        <li>
                            <div class="weekname">SAT</div>
                            <div class="datelist">16</div>
                        </li>
                        <li>
                            <div class="weekname">SUN</div>
                            <div class="datelist">17</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--日历结束-->
        <!--每日佣金额度开始-->
        <div class="welcome-left-container col-lg-9 marb10" style=" padding-left:0; padding-right:0;">
            <div class="welcome-left-container col-lg-6">
                <div class="panel area-pad">
                    <div class="area-tit">每日佣金情况</div>
                    <div id="yjchart" style="width:100%;height:308px;"></div>
                </div>
            </div>
            <div class="welcome-left-container col-lg-6">
                <div class="panel area-pad">
                    <div class="area-tit">每日新增人数</div>
                    <div id="rschart" style="width:100%;height:308px;"></div>
                </div>
            </div>
        </div>
        <!--每日佣金额度结束-->
        <!--登录日志开始-->
        <div class="welcome-left-container col-lg-3 marb10">
            <div class="panel area-pad">
                <div class="area-tit">登录日志 <div class="morelink"><i class="iconfont">&#xe660;</i></div></div>
                <div class="loginLog-sm">
                    <ul>
                        <li>
                            <div class="div-text-line ellipsis">09:30AM--13:00PM</div>
                            <div class="div-text-line" >系统登录成功，IP地址：192.168.1.166</div>
                            <div class="comp-log"><i class="iconfont">&#xe65f;</i></div>
                        </li>
                        <li>
                            <div class="div-text-line ellipsis">09:30AM--13:00PM</div>
                            <div class="div-text-line" >系统登录成功，IP地址：192.168.1.166</div>
                            <div class="comp-log"><i class="iconfont">&#xe65f;</i></div>
                        </li>
                        <li>
                            <div class="div-text-line ellipsis">09:30AM--13:00PM</div>
                            <div class="div-text-line" >系统登录成功，IP地址：192.168.1.166</div>
                            <div class="comp-log"><i class="iconfont">&#xe760;</i></div>
                        </li>
                        <li>
                            <div class="div-text-line ellipsis">09:30AM--13:00PM</div>
                            <div class="div-text-line" >系统登录成功，IP地址：192.168.1.166</div>
                            <div class="comp-log"><i class="iconfont">&#xe65f;</i></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--登录日志结束-->
        <!--员工月度佣金排名开始-->
        <div class="welcome-left-container col-lg-9 marb10" style=" padding-left:0; padding-right:0;">
            <div class="welcome-left-container col-lg-6">
                <div class="panel area-pad">
                    <div class="area-tit">员工月度佣金排名</div>
                    <div id="ygydchart" style="width:100%;height:308px;"></div>
                </div>
            </div>
            <div class="welcome-left-container col-lg-6">
                <div class="panel area-pad">
                    <div class="area-tit">员工佣金总排名</div>
                    <div id="ygzchart" style="width:100%;height:308px;"></div>
                </div>
            </div>
        </div>
        <!--每日佣金额度结束-->
        <!--版本更新记录开始-->
        <div class="welcome-left-container col-lg-3 marb10">
            <div class="panel area-pad" >
                <div class="area-tit">版本更新记录<div class="morelink"><i class="iconfont">&#xe660;</i></div> </div>
                <div class="bb-update-record" style="overflow: hidden">
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）</div>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">2016年，layui 首个版本发布</div>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">2015年，layui 孵化</div>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--版本更新记录结束-->











    </div>
</div>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/lib/echarts/echarts.js"></script>
<script src="${s.base}/js/common.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery','tiows'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var tio = layui.tiows;
        // 监听
        var ws_protocol = 'ws'; // ws 或 wss
        var ip = 'localhost'
        var port = 9898
        var heartbeatTimeout = 50000; // 心跳超时时间，单位：毫秒
        var reconnInterval = 10000; // 重连间隔时间，单位：毫秒
        var binaryType = 'arraybuffer'; // 'blob' or 'arraybuffer';//arraybuffer是字节
        var handler = new function () {
            this.onopen = function (event, ws) {
                console.log("hello 连上了哦");
            };

            /**
             * 收到服务器发来的消息
             * @param {*} event
             * @param {*} ws
             */
            this.onmessage = function (event, ws) {
                var data = event.data
                console.log(data);
            }

            this.onclose = function (e, ws) {
                // error(e, ws)
            }

            this.onerror = function (e, ws) {
                // error(e, ws)
            }

            /**
             * 发送心跳，本框架会自动定时调用该方法，请在该方法中发送心跳
             * @param {*} ws
             */
            this.ping = function (ws) {
                console.log("发心跳了")
                ws.send("发心跳至服务端！")
            }
        };

        //var queryString = 'token='+admin.getLoginToken();
        var queryString = '';
        var param = null
        var tiows = new tio.ws(ws_protocol, ip, port, queryString, param, handler, heartbeatTimeout, reconnInterval, binaryType)
        //tiows.connect()

        //图表
        var myChart;
        require.config({
            paths: {
                echarts: '../../lib/echarts'
            }
        });
        // 每日佣金
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                //--- 折柱 ---
                myChart = ec.init(document.getElementById('yjchart'));
                myChart.setOption(
                    {
                        title : {
                            text: '',
                        },
                        grid:{
                            x:41,
                            y:35,
                            x2:0,
                            y2:25,
                            borderWidth:1
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{b} <br/>{a} : {c}元"
                        },
                        legend: {
                            data:['佣金']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: false},
                                dataView : {show: false, readOnly: false},
                                magicType : {show: false, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['8月7日','8月8日','8月9日','8月10日','8月11日','8月12日','8月13日']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'佣金',
                                type:'bar',
                                data:[1829, 1054, 2213, 1756, 1325, 1212, 2120],
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius:5
                                    },
                                    normal: {
                                        barBorderRadius:5,

                                         color:'#f8893d'
                                    }
                                }
                                // markLine : {
                                //     data : [
                                //         {type : 'average', name: '平均值'}
                                //     ]
                                // }
                            }
                        ]
                    }
                );
            }
        );
        // 每日新增人数
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                //--- 折柱 ---
                myChart = ec.init(document.getElementById('rschart'));
                myChart.setOption(
                    {
                        title : {
                            text: '',
                        },
                        grid:{
                            x:41,
                            y:35,
                            x2:0,
                            y2:25,
                            borderWidth:1
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{b} <br/>{a} : {c}元"
                        },
                        legend: {
                            data:['人数']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: false},
                                dataView : {show: false, readOnly: false},
                                magicType : {show: false, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['8月7日','8月8日','8月9日','8月10日','8月11日','8月12日','8月13日']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'人数',
                                type:'bar',
                                data:[829, 554, 213, 756, 325, 212, 120],
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius:5
                                    },
                                    normal: {
                                        barBorderRadius:5,

                                        color:'#41a8fc'
                                    }
                                }
                                // markLine : {
                                //     data : [
                                //         {type : 'average', name: '平均值'}
                                //     ]
                                // }
                            }
                        ]
                    }
                );
            }
        );
        //员工月度佣金排名开始
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                //--- 折柱 ---
                myChart = ec.init(document.getElementById('ygydchart'));
                myChart.setOption(
                    {
                        title : {
                            text: '',
                        },
                        grid:{
                            x:41,
                            y:35,
                            x2:0,
                            y2:25,
                            borderWidth:1
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{b} <br/>{a} : {c}元"
                        },
                        legend: {
                            data:['佣金']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: false},
                                dataView : {show: false, readOnly: false},
                                magicType : {show: false, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['员工1','员工2','员工3','员工4','员工5','员工6','员工7']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'佣金',
                                type:'bar',
                                data:[829, 554, 213, 756, 325, 212, 120],
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius:5
                                    },
                                    normal: {
                                        barBorderRadius:5,

                                        color:'#41a8fc'
                                    }
                                }
                                // markLine : {
                                //     data : [
                                //         {type : 'average', name: '平均值'}
                                //     ]
                                // }
                            }
                        ]
                    }
                );
            }
        );
        // 员工佣金总排名
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                //--- 折柱 ---
                myChart = ec.init(document.getElementById('ygzchart'));
                myChart.setOption(
                    {
                        title : {
                            text: '',
                        },
                        grid:{
                            x:41,
                            y:35,
                            x2:0,
                            y2:25,
                            borderWidth:1
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{b} <br/>{a} : {c}元"
                        },
                        legend: {
                            data:['佣金']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: false},
                                dataView : {show: false, readOnly: false},
                                magicType : {show: false, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['员工1','员工2','员工3','员工4','员工5','员工6','员工7']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'佣金',
                                type:'bar',
                                data:[829, 554, 213, 756, 325, 212, 120],
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius:5
                                    },
                                    normal: {
                                        barBorderRadius:5,

                                        color:'#41a8fc'
                                    }
                                }
                                // markLine : {
                                //     data : [
                                //         {type : 'average', name: '平均值'}
                                //     ]
                                // }
                            }
                        ]
                    }
                );
            }
        );
        $(window).resize(function () {
            myChart.resize();
        })
        $(".service-mon-tit-right-btn ul li").click(function(){
            $(".service-mon-tit-right-btn ul li").removeClass("checked");
            $(this).addClass('checked');
        })

    });
</script>
</body>
</html>
